<template>
    <div>
        <el-input v-model="msg"></el-input>
        <el-button @click="submit">提交</el-button>

        聊天内容展示：
        <ul>
            <li v-for="i,x in melist" :key="x">{{ i }}

            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userid: "",
            ws: null,
            msg: '',
            username: "",
            melist: []
        }
    },
    methods: {
        imitW() {

            this.userid = this.$route.query.userid,

                this.username = '用户' + this.userid
            this.ws = new WebSocket("ws://localhost:8000/ws?userid=" + this.userid + "&name=" + this.username)
            this.ws.onopen = function () {
                alert('success')

            }
            this.ws.onmessage = (msg) => {
                var mes = JSON.parse(msg.data)


                this.melist.push(mes['mes'])


            }
        },
        submit() {
            var mes = this.username + "说:" + this.msg
            this.melist.push(mes)
            var sendmes = JSON.stringify({ 'id': 'kefu', 'mes': mes })
            this.ws.send(sendmes)
        }
    },
    mounted() {
        this.imitW()
    }

}
</script>

<style></style>